Media Queries in RWD allow the designer to apply CSS selectively depending upon different media configurations (such as screen size).

Usage:

A common approach when using Media Queries is to create a simple single-column layout for narrow-screen devices (e.g. mobile phones), then check for wider screens and implement a multiple-column layout when you know that you have enough screen width to handle it. Designing for mobile first is known as mobile first design.

You can add multiple media queries within a stylesheet, tweaking your whole layout or parts of it to best suit the various screen sizes. The points at which a media query is introduced, and the layout changed, are known as breakpoints. If using breakpoints, best practices encourage defining media query breakpoints with relative units like rem rather than absolute sizes of an individual device.